<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 引入layui css -->
    <link rel="stylesheet"href="https://www.layuicdn.com/layui/css/layui.css" />
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        body {
            /*加载背景图*/
            background-image: url(./img/backgroundImg.jpg);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;  //此条属性必须设置否则可能无效/
            /* 让背景图基于容器大小伸缩 */
        background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            /*background-color: #CCCCCC;*/
        }
        .layui-container{
            margin: 310px auto;
            width: 1250px;
        }
        .h{
            margin: 10px;
        }

        .layui-form-item{
            text-align: center;
        }
        .layui-form{
            border-radius: 20px;
            border: 4px solid deepskyblue;
        }
        .layui-input{
            width: 90%;
            height: 50px;
        }

        #bg{
            background-color: azure;
        }
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md5 layui-col-md-offset3">
            <!--<form class="layui-form" action="${pageContext.request.contextPath}/user/login" lay-filter="example" method="post">-->
            <form class="layui-form" lay-filter="example" id="bg">
                <div ><h1 style="text-align: center">登录</h1></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="verifyCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <!-- <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>-->
                        <img id="vcode" src="/user/getvcode" onclick="fresh()">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否开启免登录</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="autoLogin" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-submit class="layui-btn layui-btn-lg layui-btn-normal layui-btn-radius" lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">重置</button>
                    <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" onclick="window.location.href='register.html'">注册</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    //点击图片刷新验证码
    function fresh() {
        document.getElementById("vcode").src="/user/getvcode" + "?time=" + new Date().getTime();
    }

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            // console.log(data)
            var mm = data.field;
            console.log(data.field)
            $.post("/user/login",mm,function (obj) {
                layer.msg(obj.msg,{icon:1})
                if (obj.status == 1){
                    location.href="main.html";
                }
            },"json");
            return false;
        });

        form.verify({
            username: function(title){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(title)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(title)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(title)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(title === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    });

</script>
</body>
</html>